<template>
  <div>
    <h2><slot></slot></h2>

    <button @click="myIncreaseAgeAsyncAsync">Increase age async</button>
    <button @click="mySetNameAsync('张智琦2')">Set name async</button>
    <button @click="increaseAgeAsync">Increase age async</button>
    <button @click="setNameAsync('张智琦2')">Set name async</button>
    <button @click="increaseAgeAsync2">Increase age async</button>
    <button @click="setNameAsync2('张智琦2')">Set name async</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'ModuleActions2',
  methods: {
    // actions → 组件的 methods
    myIncreaseAgeAsyncAsync() {
      this.$store.dispatch('userModule/increaseAgeAsync')
    },
    mySetNameAsync(name) {
      this.$store.dispatch('userModule/setNameAsync', name)
    },

    // mapActions
    ...mapActions('userModule', ['increaseAgeAsync', 'setNameAsync']),

    // mapActions 重命名
    ...mapActions('userModule', {
      increaseAgeAsync2: 'increaseAgeAsync',
      setNameAsync2: 'setNameAsync'
    })
  }
}
</script>
